<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/my-info.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>

		<div class="mui-content">
			<div id="my_info_box">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="artistheaderphoto">
							<span id="artist_header_photo_text">个人头像</span><img id="artist_header_photo" data-preview-src="" data-preview-group="1" />
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="no_change">
							<span>帮办数:</span><span id="singularNum"></span>
							<span class="mui-pull-right right_align"><span>被关注数:</span><span id="fanNum"></span></span><br />
							<span>成交数:</span><span id="completeNum"></span>
							<span class="mui-pull-right right_align"><span>好评率:</span><span id="rateOfpraise"></span></span><br />
							<span>诚信等级:</span><span id="honestyLevel"></span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "StageName" data-name = "stageName">
							<label>昵称</label><span id="stageName" class="my_data mui-ellipsis datafield"></span>
						</a>
					</li>
					<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "Salary" data-name = "minsalary">
							<label>出场费</label><span class="my_data">￥<span id="minSalary" class="datafield"></span></span>
						</a>
					</li>-->
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="myType_a">
							<label>类型</label><span id="performanceTypeId" class="my_data mui-ellipsis"></span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "Specialty" data-name = "specialty">
							<label>主要帮办</label><span id="specialty" class="my_data mui-ellipsis datafield"></span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "SelfIntro" data-name = "selfintro">
							<label>自我介绍</label><span id="selfIntroduction" class="my_data mui-ellipsis datafield"></span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "BioList" data-name = "biographylist">
							<label>已有证书</label><span id="biographyList" class="my_data mui-ellipsis datafield"></span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "BioHighest" data-name = "biohighest">
							<label>最佳帮办</label><span id="biographyHighest" class="my_data mui-ellipsis datafield"></span>
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right action" href="#actionArea" data-url = "Perfor" data-name = "performancelist">
							<label>帮办经历</label><span id="performanceList" class="my_data mui-ellipsis datafield"></span>
						</a>
					</li>
				</ul>
			</div>
			<div id="more_info_box">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" id="more_info">
							更多信息
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-popover mui-popover-action" id="actionArea">
				<h5></h5>
				<form class="mui-input-group form1">
					<input type="text" />
				</form>
				<form class="mui-input-group form2">
					<textarea rows="5"></textarea>
				</form>
				<button class="mui-btn btn-block btn-main">确定</button>
			</div>
		</div>

	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/user.js"></script>
	<script>
		mui.plusReady(function() {
			// me.html
			var mePage = plus.webview.currentWebview().opener();
			mui.init();
			var headerPhoto = document.getElementById("artist_header_photo");
			var headLazyLoad = mui('#artistheaderphoto').imageLazyload({
				placeholder: '../images/holder1.png'
			});
			//点击头像放大
			mui.previewImage();
			
			var moreinfojstr = {};
			Common.ajax({
				url : baseURL + 'selfInfo/start.json'
			}, function(data) {
				console.log(JSON.stringify(data));
				if(data.code == 1) {
					var data = data.artistInfo;
					$.each(data, function(i, o) {
						if(!/^(rateOfpraise|pic|id|birthday|constellation|bloodType|stature|weight|bwh|graduateSchool|educationalBackground|artisticCareer|sex|city|address)$/.test(i)) {
							$("#" + i).text(o);
						} else if(!/^(id|birthday|constellation|bloodType|stature|weight|bwh|graduateSchool|educationalBackground|artisticCareer|sex|city|address)$/.test(i)) {
							switch(i) {
								case 'pic': // 艺人头像
									$(headerPhoto).attr('data-lazyload', Common.artistPic + data.id + o + '?' + Math.random());
									headLazyLoad.refresh(true);
									break;
								case 'rateOfpraise': // 好评率
									$("#rateOfpraise").text(o * 10 + '%');
									break;
								default:
									break;
							}
						} else {
							moreinfojstr[i] = o;
						}
					});
				} else {
					mui.toast('加载失败，请稍后再试');
				}
				plus.nativeUI.closeWaiting();
			}, function(xhr) {
				plus.nativeUI.closeWaiting();
				Common.linkError();
				console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
			})
			
			//艺人头像
			//监听pickheader事件
			document.addEventListener('pickheader', function() {
				var path1 = event.detail.path; //获取传递过来的数据
				console.log('1' + path1);
				var jstr = {};
				jstr.path = path1;
				console.log(JSON.stringify(jstr));
				//上传数据
				mui.plusReady(function() {
					Common.ajax({
						url : baseURL + 'selfInfo/headPortrait.json',
						type : 'POST',
						contentType : "application/json; charset=utf-8",
						data : JSON.stringify(jstr)
					}, function(data) {
						console.log(JSON.stringify(data));
						//显示头像
						headerPhoto.src = path1;
						mui.toast('帮办头像修改成功');
						var newuserInfo = plus.storage.getItem('userInfo');
						newuserInfo = JSON.parse(newuserInfo);
						newuserInfo.pic = data.pic;
						newuserInfo = JSON.stringify(newuserInfo);
						plus.storage.setItem('userInfo', newuserInfo);
						// me.html 修改头像
						mui.fire(mePage, 'update', {
							logindata: 1
						});
					}, function(xhr) {
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				});
			});
			//更多信息
			mui(".mui-table-view-cell").on('tap', '#more_info', function() {
				//				console.log(JSON.stringify(moreinfojstr));
				Common.openWindow('my-more-info.html', {
					moreinfojstr: moreinfojstr
				});
			});
		
			// 拍照
			function captureImage(pic) {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						mui.openWindow({
							url: 'cropper.html',
							id: 'cropper.html',
							extras: {
								path: "file:///" + entry.fullPath,
								change: "cem"
							}
						});
					}, function(e) {
						mui.toast(e.message);
					});
				}, function(e) {}, {
					filename: "_doc/camera/"
				});
			}
			// 从相册中选择图片 
			function selectPicture(pic) {
				plus.gallery.pick(function(url) {
					mui.openWindow({
						url: 'cropper.html',
						id: 'cropper.html',
						extras: {
							path: url,
							change: "open"
						}
					});
				}, function(error) {
					// TODO 判断用户主动取消还是打开失败
					mui.toast(error.message);
				});
			}
			
			// TODO 此处将监听事件改为 tap 就会出现点击图片时 actionsheet一起弹出的现象
			mui('.mui-table-view').on('click', '#artistheaderphoto', function() {
				var btnArray = [{
					title: "拍照"
				}, {
					title: "从相册选择"
				}];
				var pic = this;
				plus.nativeUI.actionSheet({
					title: "修改头像",
					cancel: "取消",
					buttons: btnArray
				}, function(e) {
					var index = e.index;
					switch(index) {
						case 0:
							break;
						case 1:
							captureImage(pic); //拍照
							break;
						case 2:
							selectPicture(pic);
							break;
					}
				});
			})
		});
		
		var sendURL, isStageName = false, dataName;
		// 弹出actionsheet时填入内容
		mui('.mui-table-view').on('tap', 'a.mui-navigate-right.action', function() {
			var title = $(this).find('label').text();
			$("#actionArea").find('h5').text(title);
			if(title == '昵称' || title == '出场费') {
				if(title == '昵称') {
					isStageName = true;
				} else {
					isStageName = false;
				}
				$("#actionArea form").hide().filter('.form1').show().find('input').val($(this).find('span.datafield').text()).focus();
			} else {
				$("#actionArea form").hide().filter('.form2').show().find('textarea').val($(this).find('span.datafield').text()).focus();
			}
			sendURL = baseURL + 'selfInfo/update' + $(this).attr('data-url') + '.json';
			dataName = $(this).attr('data-name');
		})
		
		// 点击确定按钮
		mui('#actionArea').on('tap', 'button', function() {
			var changeValue = $(this).siblings('form:visible').find('input, textarea').val();
			var changeLabel = $(this).siblings('h5').text();
			if(!changeValue) {
				mui.toast('修改信息不能为空');
			} else {
				var url = sendURL;
				var sendData = dataName + '=' + changeValue;
				console.log(url);
				console.log(sendData);
				Common.ajax({
					url : url, 
					type : 'POST',
					data : sendData
				}, function(data) {
					if(data.code == 1) {
						mui.toast('修改' + changeLabel + '成功');
						mui('.mui-popover').popover('hide');
						plus.webview.currentWebview().reload();
						$(this).siblings('form:visible').find('input, textarea').val('');
						// 修改艺名成功则更新本地存储及me.html
						if(isStageName) { 
							var userInfo = JSON.parse(plus.storage.getItem('userInfo'));
							userInfo.nickName = changeValue;
							plus.storage.setItem("userInfo", JSON.stringify(userInfo));
							var mePage = plus.webview.currentWebview().opener();
							mui.fire(mePage, 'update', {
								logindata: 1
							});
						}
					}
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
			}
		})

		//类型
		mui(".mui-table-view-cell").on('tap', '#myType_a', function() {
			var mytype = document.getElementById("performanceTypeId").innerHTML;
			Common.openWindow('my-type.html', {
				mytype: mytype
			});
		});
		//监听编辑类型页面的performanceTypeIdchange事件，获取传递数据并显示
		document.addEventListener('myTypeChange', function() {
			document.getElementById("performanceTypeId").innerHTML = event.detail.myType;
		})
	</script>

</html>